<template>
  <div id="imager" class="imager warning-page">
    <p class="ge-title-one">形象预警</p>

    <p class="ge-title-two">正负面形象</p>
    <div class="pie-chart">
      <div class="pie-center" v-if="isLoadingPie">
        <van-loading type="spinner"/>
      </div>
      <canvas :id="chartName" style="width:100%;"></canvas>
      <!--
      <van-row align="center" justify="center">
        <van-col span="12" class="w-center">
          <span class="pie-block b-orange"></span>
          <span class="pie-text">敏感 </span>
          <span class="w-orange">{{sensitive}}</span>
        </van-col>
        <van-col span="12" class="w-center">
          <span class="pie-block b-purple"></span>
          <span class="pie-text">非敏感 </span>
          <span class="w-purple">{{nonSensitive}}</span>
        </van-col>
      </van-row>
      -->
    </div>

    <p class="ge-title-two">敏感信息</p>
    <!--
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text=""
      @load="loadList"
    >-->
    <ul  v-if="hasData" class="sentiment-info">
      <li class="senti-item" v-for= "(item, index) in list" :key="index" @click="gotoDetail(item.id,'opinion', item.title)">
        <div class="title limit1line">{{item.title}}</div>
        <div class="des limit2line"><p class="sentiment-content" v-html="item.summary"></p></div>
        <!-- {{item.summary}} -->
        <div class="other">
          <div class="source">{{item.source}}</div>
          <div class="time">{{item.published_time}}</div>
        </div>      
      </li>
    </ul>

    <!--
    </van-list>
    -->
    <div v-if="!hasData" class="bdl"><div class="no-sentiment-info"><img class="no-data" :src="require('@/assets/noImageWarning@2x.png')"/></div></div>
  </div>
</template>

<script>
// @ is an alias to /src
import Vue from 'vue';
import { enums } from '@/core/config';
import router from '@/router';
import IngotCookie from '@/utils/cookie.js';
import { mapGetters, mapActions } from 'vuex';
import { List, Panel, Row, Col, Loading} from 'vant';
import {getEmotionInfo, getSensitiveInfo} from '@/api/warning';

Vue.use(List).use(Panel).use(Row).use(Col).use(Loading);

export default {
  name: 'imager',
  components: {
  },
  data() {
    return {
      isLoadingPie: true,
      list: [], // 敏感信息列表
      pageNo: 1, // 敏感信息页数
      hasData: true,
      loading: false,
      finished: false,
      chartName: 'pieChart',
      sensitive: '20%', // 敏感
      nonSensitive: '80%', // 非敏感
    }
  },
  created() {
  },
  // updated(){},
  activated() {

  },
  mounted() {
    // 正负面形象
    getEmotionInfo().then((res) => {
      let data = res.data.data_list;
      // 后台接口已传来最终的数据，不需要计算了
      // let sum = data.reduce((accu, obj) => {
      //   return accu + obj.value;
      // }, 0);
      // data = data.map((item) => {
      //   return {
      //     name: item.name,
      //     value: item.value / sum
      //   }
      // });
      this.isLoadingPie = false;
      this.drawChart(data);
    }, () => {
      // 异常情况
      this.isLoadingPie = false;
    });
    // 敏感信息
    this.loadList();
  },
  methods: {
    ...mapActions([
      'ac_gotoDetail'
    ]),
    // 获取敏感信息，最多展示20条信息
    loadList() {
      // 敏感信息-最新接口不需要传参数
      getSensitiveInfo({
        // api_type: 4,
        // sensitive_type: 2,
        // // similar_merge: 1,
        // page_num: this.pageNo,
        // page_size:20,
      }).then((res) => {
        // 加载状态结束
        // this.loading = false;
        if (res.data &&  res.data.data_list && res.data.data_list.length > 0) {
          this.hasData = true;
          this.list = this.list.concat(res.data.data_list);
          console.log("list",this.list)
        } else {
          this.hasData = false;
        }
        
        // this.pageNo += 1;
        // if (this.list.length >= 20 || this.pageNo > res.data.max_page) {
        //   this.finished = true;
        // }
      }, (e) => {
        console.log('--出错了：', e);
        this.hasData = false;
        // this.finished = true;
        // this.loading = false;
      })
    },
    toPercent(num) {
      return Number(num * 100).toFixed(2) + '%';
    },
    gotoDetail(id,api_type, title){
      console.log('正在跳转到详情页...');
      console.log('传递详情页参数：', id, api_type, title);
      this.ac_gotoDetail({id, api_type, title});
    },
    drawChart(data) {
      if(!data) {
        data = [{
          name: '敏感',
          value: 0,
          // a: '1'
        }, {
          name: '非敏感',
          value: 0,
          // a: '1'
        }];
      }
      let map = {};
      // 是否有100的情况，为后面画完整圆环做准备
      let has100 = false;
      data.forEach(function(obj) {
        map[obj.name] = obj.value;
        if(obj.value == 100) {
          has100 = true;
        }
      });
      // console.log('渲染图的map数据：', map);
      // Step 1: 创建 Chart 对象
      const chart = new this.$F2.Chart({
        id: this.chartName,
        padding: [0, 0, 20, 0],
        appendPadding: 0,
        // width: 300,
        // height: 300 * 0.64,
        pixelRatio: window.devicePixelRatio // 指定分辨率
      });

      // 设置图例项的内容
      var colorMap = {
        '敏感': '#EAC386',
        '非敏感': '#6774C0',
      };
      var legendItems = [];

      data.map((obj) => {
        var item = {
          name: obj.name + " " + obj.value + '%',
          //value: obj.value + '%',
          valueStyle: {
            textAlign: 'center', // 文本对齐方向，可取值为： start middle end
            fill: 'red', // 文本的颜色
            fontSize: '12', // 文本大小
            fontWeight: 'bold', // 文本粗细
            textBaseline: 'top', // 文本基准线，可取 top middle bottom，默认为middle
            // width: 20, // 设置文本的宽度
            // height: 20 // 设置文本的高度
          },
          marker: {
            symbol: 'square',
            fill: colorMap[obj.name],
            radius: 6
          }
        };
        legendItems.push(item);
      });

      // Step 2: 载入数据源
      chart.source(data, {
        // value: {
        //   formatter: function formatter(val) {
        //     return val + '%';
        //   }
        // }
      });
      chart.tooltip(false);
      chart.axis(false);
      // chart.legend({
      //   position: 'right', // 放在右边展示
      //   itemFormatter(val) { //配置图例自定义展示内容
      //     debugger;
      //     return '<span style="color:red;">' + val + '  ' + map[val] +'</span>';
      //   },
      //   // nameStyle: {
      //   //   fontSize: '13', // 图例文本大小
      //   //   fill: 'black' // 图例文本颜色
      //   // },
      //   marker: {
      //     symbol: 'square', // marker 的形状（圆点）
      //     radius: 6 // 半径大小
      //   }
      // });

      chart.legend({
        custom: true,
        items: legendItems,
        nameStyle: {
          fill: '#757679',
          fontSize: '14', // 文本大小
          fontWeight: 'bold', // 文本粗细
        }, // 图例项 key 值文本样式
        valueStyle: {
          fill: '#333',
          fontSize: '14',
          fontWeight: 'bold' // 图例项 value 值文本样式
        },
        position: 'bottom',
        align: 'center',
      });
      chart.coord('polar', {
          transposed: true,
          innerRadius: 0.7,
          radius: 0.85
        });
      let circleStyle = {};
      if(!has100){
        circleStyle = {
          lineWidth: 3,
          stroke: '#fff',
          lineJoin: 'round',
          lineCap: 'round'
        }
      }
      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
      chart.interval().position('a*value').color('name', function(val) {
        return colorMap[val];
      })
      .adjust('stack')
      .style(circleStyle);

      chart.guide().html({
        position: ['50%', '50%'],
        html: '<div class="pie-info-wrapper">'
            + '<div ><img class="icon-people" src="'+ require('@/assets/people@2x.png')+'"/></div>'
            + '<div class="pie-info-text">正负面形象</div>'
            + '</div>'
      });

      // Step 4: 渲染图表
      chart.render();
    }
  }
}
</script>
<style>
.red {
  color: #ff0000;
}
.sentiment-content {
  padding: 0 0 5px 0;
}
.pie-center{
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.bdl {
  border-bottom: 1px solid #f1f1f1;
}
.pie-block{
  width:12px;
  height: 12px;
  display: inline-block;   
}
.pie-text{
  color:#757679;
  font-size:14px;
}
.w-center{
  text-align: center;
}
.b-orange{
  background: #EAC386; 
}
.w-orange{
  color:#EAC386;
}
.b-purple{
 background: #6774C0;
}
.w-purple{
  color: #6774C0;
}
.warning-page .ge-title-one{
  margin: 20px 0 4px;
  color: #222;
  font-size: 18px;
}  
.warning-page .ge-title-two{
  color: #222222;
  font-size: 16px;
  /* margin: 18px 0 7px; */
  line-height: 23px;
  margin: 18px 0 3px;
}
.pad10{
  padding-bottom: 10px;
}
.no-data{
  width: 100%;
  height: auto;
}
/* .no-data img {
  width: 50%;
} */
.no-sentiment-info{
  margin: 0 auto;
  padding: 30px 0;
  width:203px;
  height: auto !important;
  /* height: 173px; */
  text-align: center;
  border-bottom: 1px solid #f1f1f1;
}
.limit1line{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.limit2line{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.imager{
  /* height: 100vh; */
  padding: 0 15px;
  text-align: left;
}
.pie-chart{
  position: relative;
  box-shadow: 0 0 11px 4px rgba(0,0,0,0.05);
  border-radius: 10px;
  margin-bottom: 8px;
}
.sentiment-info{
  padding: 0px 8px;
}
.sentiment-info li {
  padding: 11px 0 10px;
  list-style: none;
  position: relative;
}
.sentiment-info li:first-child{
  padding-top: 6px;
}

.senti-item:not(:last-child)::after, .has-line:after{
    content: ' ';
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    border-bottom: 1px solid #EAEAEA;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .senti-item:not(:last-child)::after, .has-line:after {
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .senti-item:not(:last-child)::after, .has-line:after{
    -webkit-transform: scaleY(0.33);
            transform: scaleY(0.33);
  }
}
.icon-people{
  height: 29px;
}
.sentiment-info .title{
  color: #222222;
  font-weight: bold;
  font-size:15px;
  line-height: 23px;
}
.sentiment-info .des{
  padding-top: 3px;
  color: #757679;
  font-size: 14px;
  line-height: 21px;
}
.sentiment-info .other{
  padding-top: 6px;
  color: #BCBCBC;
  font-size: 12px;
  line-height: 17px;
  display: flex;
  flex-direction: row;
}
.sentiment-info .source {
  padding-right: 10px;
}
.pie-info-wrapper{
  font-size: 29px;
  width: 130px;
  height: 130px;
  border-radius: 130px;
  text-align: center;
  position: absolute;
  top: 76px;
  left: 47px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pie-info-text{
font-size: 11px; color:#727579
}
.pie-info-icon{
  color: #EACDA1;
  height:29px;
}
.pad-bottom {
  padding-bottom: 60px;
}

</style>